<template>
  <div class="bigbox">
    <header><Userdata></Userdata></header>
    <main>
      <div class="left">
        <AddUser></AddUser>
      </div>
      <div class="right">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div
          id="right"
          ref="chartDom2"
          style="width: 100%; height: 400px"
        ></div>
      </div>
    </main>
    <footer>
      <Mapdata></Mapdata>
    </footer>
  </div>
</template>

<script setup>
import Userdata from "@/components/Userdata.vue";
import AddUser from "@/components/AddUser.vue";
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import Mapdata from "../../components/Mapdata.vue";

// 饼图
const chartDom2 = ref(null);
let option2;
let myChart2 = null;

// 右边饼图

option2 = {
  title: {
    text: "用户性别分布",
    top: "3%",
    left: "3%",
    textStyle: {
      color: "black",
      fontWeight: "bold",
      fontSize: 20,
    },
  },
  tooltip: {
    trigger: "item",
    backgroundColor: "rgba(0,0,0,0.3)",
    borderWidth: 0,
    textStyle: {
      color: "#fff",
    },
  },
  color: ["rgb(50,218,221)", "rgb(126,107,255)", "rgb(255,166,106)"],
  series: [
    {
      data: [
        { name: "男", value: 480 },
        { name: "女", value: 400 },
        { name: "未知性别", value: 100 },
      ],
      type: "pie",
      radius: ["40%", "70%"],
      top: "20%",
      left: "center",
      width: "70%",
      height: "70%",
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 1,
      },
    },
  ],
};

// console.log(mapList)
onMounted(() => {
  myChart2 = echarts.init(chartDom2.value);
  // 使用刚指定的配置项和数据显示图表。
  myChart2.setOption(option2);
});
</script>

<style lang="less" scoped>
.bigbox {
  // background-color: #ebebeb;
  width: 100%;
  height: 100%;
  // overflow: scroll;
}
main {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  // height: 400px;
  .left {
    background-color: white;
    width: 60%;
    // height: 300px;
    border-radius: 20px;
  }
  .right {
    background-color: white;
    width: 38%;
    height: 100%;
    border-radius: 20px;
  }
}

footer {
  div {
    margin-top: 20px;
    background-color: white;
    width: 100%;
    height: 600px;
    border-radius: 20px;
    padding-bottom: 20px;
  }
}
</style>
